<template>
    <div class="xhl-topbar-search">
      <search-component :placeholder="'请选择'" @search="search"></search-component>
      <search-component placeholder="搜索内容" @search="search"></search-component>
      <button class="reset" @click="reset">重置</button>
      <div class="xhl-topbar-operate flexBetweenCenter">
        <div class="leftBox">
          <el-button type="primary" size="small">新增单据</el-button>
          <el-button type="default" size="small" class="is-plain">打印</el-button>
        </div>
        <div class="rightBox">
          <el-tooltip content="刷新" effect="light" placement="top">
            <i class="icon-refresh" @click="handleRefresh"></i>
          </el-tooltip>
          <el-tooltip content="导出" effect="light" placement="top">
            <i class="icon-download" @click="handleExport"></i>
          </el-tooltip>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%" @row-click="handleRowClick">
      
        <el-table-column prop="date" label="状态" sortable></el-table-column>
        <el-table-column prop="name" label="单据编号" sortable></el-table-column>
        <el-table-column prop="address" label="入库仓库"></el-table-column>
        <el-table-column prop="date" label="处理人" sortable></el-table-column>
        <el-table-column prop="name" label="入库时间" sortable></el-table-column>
        <el-table-column prop="address" label="供应商"></el-table-column>
        <el-table-column prop="date" label="总金额" sortable></el-table-column>
        <el-table-column prop="name" label="备注" sortable></el-table-column>
        <el-table-column prop="address" label="操作"></el-table-column>
    
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalItems">
      </el-pagination>
    </div>
  </template>
  
  <script>
  
  
  export default {
 
    data() {
      return {
        tableData: [], 
        currentPage: 1, 
        pageSize: 10, 
        totalItems: 0 
      };
    },
    methods: {
      search(query) {
    
      },
      reset() {
    
      },
      handleRefresh() {
     
      },
      handleExport() {

      },
      handleSizeChange(newSize) {
  
        this.pageSize = newSize;
        this.loadTableData();
      },
      handleCurrentChange(newPage) {
        
        this.currentPage = newPage;
        this.loadTableData();
      },
      handleRowClick(row) {
    
        console.log('Row clicked:', row);
      },
      loadTableData() {
      
      }
    }
  };
  </script>